<template>
    <div class="tree">
        <div class="tree-item" v-for="item in TreeData" >
            <div class="tree-item-title">
                <div class="item-icon" @click="changeItem(item)">
                    <img src="@/assets/filesIcon/open.png" alt="" v-if="!item.isLeaf">
                    <img src="@/assets/filesIcon/closeIcon.png" alt="" v-else>
                </div>
                <div class="item-icon-folder">
                    <img src="@/assets/filesIcon/folder.png" alt="" >
                </div>
                <div class="item-title">{{item.title}}</div>
                <div class="item-number">{{item.children.length}}</div>
            </div>
            <div class="tree-item-child" v-if="item.isLeaf">
                <div class="tree-item-child-item" v-for="child in item.children">
                    <img :src="fileTypeIcon(child)" alt="">
                    <div class="FileName" @click="ViewerFile(child)">{{fileName(child)}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//项目详情相关附件 树形组件
import {computed} from 'vue'
import {PlusSquareOutlined,MinusSquareOutlined} from '@ant-design/icons-vue'
import {api as viewerApi} from 'v-viewer'
import {message} from "ant-design-vue";
//由于 webpack无法使用require引入图片地址 使用import 的方式引入
import pdfIcon from '@/assets/filesIcon/pdf.png';
import imgIcon from '@/assets/filesIcon/imgIcon.png';
import wordIcon from '@/assets/filesIcon/word.png';
import ExcelIcon from '@/assets/filesIcon/Excel.png';
import VideoIcon from '@/assets/videoIcon.png';
import otherIcon from '@/assets/filesIcon/otherIcon.png';
export default {
    name: "TreeCom",
    props:{
        TreeData:{
            type:Array,
            default: []
        }
    },
    components:[PlusSquareOutlined,MinusSquareOutlined],
    setup(){
        let baseUrl =  import.meta.env.VITE_APP_API_BASE_URL
        let staticUrl = import.meta.env.VITE_APP_API_BASE_URL + 'sys/common/static/'
        let changeItem = (item)=>{
            item.isLeaf = !item.isLeaf
        }
        //返回需要展示的文件名 去掉所存位置以及上传生成的时间戳
        let fileName = computed(()=>{
            return (name)=>{
               return  name.split('/').at(-1).replace(/_\d{13}/g, '')
            }
        })
        let getFileType = (fileName)=>{//获取当前文件类型
            let fileType = fileName.split('.').at(-1)
            //常见图片类型
            let imgTypeArr = ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"]
            //常见pdf类型
            let pdfTypeArr = ['pdf']
            //常见视频类型
            let videoTypeArr  = ["mp4", "avi", "mkv", "mov", "wmv", "flv", "3gp"];
            //常见Excel类型
            let ExcelType = ["xlsx", "xls"]
            //常见word类型
            let wordTypeArr = ["doc", "docx"]
            if(imgTypeArr.includes(fileType)){
                return 'img'
            }else if(pdfTypeArr.includes(fileType)){
                return 'pdf'
            }else if(videoTypeArr.includes(fileType)){
                return 'video'
            }else if(ExcelType.includes(fileType)){
                return 'Excel'
            }else if(wordTypeArr.includes(fileType)){
                return 'Word'
            }else {
                return 'other'
            }
        }
        let fileTypeIcon = computed(()=>{//根据文件类型回显对应图标
            return (fileName)=>{
                let fileType = getFileType(fileName)
                if(fileType === 'img'){
                    return imgIcon
                }else if(fileType === 'pdf'){
                    return pdfIcon
                }else if(fileType === 'video'){
                    return VideoIcon
                }else if (fileType === 'Excel'){
                    return ExcelIcon
                }else if(fileType === 'Word'){
                    return wordIcon
                }else {
                    return otherIcon
                }

            }
        })
        //文件预览
        let ViewerFile = (fileName) =>{
            let fileType =  getFileType(fileName)
            switch (fileType){
                //当前预览img为预览一个
                case 'img':
                    let imgUrl = staticUrl + fileName
                    let imgArr = [imgUrl]
                    viewerApi({images: imgArr})
                    break
                case 'video':
                    const page = window.open('', "_blank", "resizable,scrollbars,status");
                    const html = `<body style='background:black;'><div style = 'width:80%;margin:auto;' ><video controls width='100%' autoplay style="object-fit: fill;" src='${staticUrl + '/' + fileName}'></video></div></body>`;
                    page.document.write(html);
                    break
                case 'pdf':
                    let url = `${baseUrl}/generic/web/viewer.html?file=${staticUrl + '/' + fileName}`
                    window.open(url, "_blank", "resizable,scrollbars,status");
                    break
                default:
                    message.info('开始下载!')
                    downloadFile(fileName)
            }
        }
        //文件下载
        let downloadFile = (fileName)=>{
            let url = staticUrl + fileName
            let link = document.createElement('a');
            link.href = url;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        return{
            changeItem,
            fileName,
            getFileType,
            fileTypeIcon,
            pdfIcon,
            ViewerFile,
            downloadFile
        }
    }
}
</script>

<style scoped lang="less">
    img{
        display: block;
        height: 16px;
        width: 16px;
        margin-right: 8px;
    }
    .tree{
        max-height: 200px;
        overflow-y: auto;
        .tree-item{
            margin-bottom: 12px;
            .tree-item-title{
                display: flex;
                align-items: center;
                line-height:20px;
                cursor: pointer;
                .item-title{

                }
                .item-number{
                    height: 20px;
                    width: 20px;
                    line-height: 20px;
                    text-align: center;
                    color: #FFFFFF;
                    font-size: 16px;
                    background: #666A71;
                    border-radius: 4px;
                    overflow: hidden;
                    margin-left: 8px;
                }
            }
            .tree-item-child{
                width: 90%;
                .tree-item-child-item{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin-left: 24px;
                    //line-height:40px;
                    //height: 40px;
                    padding-top: 12px;
                    .FileName{
                        cursor: pointer;
                    }
                    div{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
    }
  }
</style>
